<template>
    <div class="container">
        <div class="row">
            <div class="col-md-4 order-md-2 mb-4">
                <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">数据</span>
                    <span class="badge badge-secondary badge-pill">{{getResourceLength}}</span>
                </h4>
                <!-- {/* 搜索框 start */} -->
                <ResourceSearch></ResourceSearch>
                <!-- {/* 搜索框 Ends */} -->
                <!-- {/* 数据列表 Starts */} -->
                <ResourceList :activeId="resource?.id" @onHandleItem="onHandleItem" :resources="resources">
                </ResourceList>
                <button class="btn btn-sm btn-primary mt-2" @click="addResource">添加</button>

                <!-- {/* 数据列表 Ends */} -->
            </div>
            <!-- {/* 更新数据 Starts */} -->
            <div class="col-md-8 order-md-1">
                <h4 class="mb-3">数据
                    <template v-if="resource">
                        <button :class="`btn btn-sm ml-2 ${loggerBtnClass}`"
                            @click="isDetailView=!isDetailView">{{isDetailView?'编辑':'详情'}}</button>
                        <ResourceDelete :activeId="resource?.id" @deleteData="deleteData($event)" />
                    </template>

                </h4>

                <ResourceDetail :resource="resource" v-if="isDetailView">
                    <template #buttonLink>
                        <router-link class="btn btn-outline-success" :to="{
                            name: 'resourceDetailPage',
                            params: { id: resource?.id },
                          }">详情</router-link>
                    </template>
                </ResourceDetail>
                <ResourceUpdate @updateData="updateData($event)" :resource="resource" v-else />
            </div>
            <!-- {/* 更新数据 Ends */} -->
            <!-- {/* 数据详情 Starts */} -->
            <!-- <ResourceDetail /> -->
            <!-- {/* 数据详情 Ends */} -->
        </div>
    </div>
</template>
<script>
    import ResourceList from '@/components/ResourceList.vue'
    import ResourceUpdate from '@/components/ResourceUpdate.vue'
    import ResourceDetail from '@/components/ResourceDetail.vue'
    import ResourceSearch from '@/components/ResourceSearch.vue'
    import ResourceDelete from '@/components/ResourceDelete.vue'

    import { reactive, ref, toRefs, computed, onMounted } from 'vue'
    import { fetchResources } from '@/api/';
    export default {
        components: {
            ResourceList,
            ResourceUpdate,
            ResourceDetail,
            ResourceSearch,
            ResourceDelete
        },
        name: 'ResourceHome',
        setup() {
            // data
            const isDetailView = ref(true)
            const resource = ref(null)
            const data = reactive({
                resources: []
            })
            // computed
            const getResourceLength = computed(() => {
                return data.resources.length
            })
            const loggerBtnClass = computed(() => {
                return isDetailView.value ? 'btn-primary' : 'btn-success'
            })
            // 生命钩子
            onMounted(async () => {
                const resources = await fetchResources()
                data.resources = resources
            })
            // methods
            const addResource = () => {
                const id = '_' + Math.random().toString(36).slice(2)
                const type = ['blog', 'video', 'book'][Math.floor(Math.random() * 3)]
                data.resources.unshift({
                    id: '_id' + id,
                    type: type,
                    description: `${id} description`,
                    link: '',
                    title: `${id} title`
                })
            }
            const onHandleItem = (resourceData) => {
                resource.value = resourceData
            }
            const updateData = (value) => {
                let index = data.resources.findIndex(v => v.id === value.id);
                data.resources[index] = value
                onHandleItem(value)
            }
            const deleteData = (value) => {
                let index = data.resources.findIndex(v => v.id === value.id);
                data.resources.splice(index, 1)
                onHandleItem(data.resources[0])
            }
            return {
                getResourceLength,
                isDetailView,
                addResource,
                loggerBtnClass,
                onHandleItem,
                resource,
                updateData,
                deleteData,
                ...toRefs(data),
            }
        }

    };
</script>
<style>

</style>